<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      :footer="false"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      modalStyle="detailModal"
      title="详情页"
      width="1000px"
      @cancel="cancel"
      @handleOk="handleOk"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">项目企业警长制信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">项目企业名称</div>
              <div class="value common-value">{{ details.projectCompanyName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">场所分类</div>
              <div class="value common-value">
                {{ get_dict_type(project_company_type, details.projectCompanyType) }}
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">安全负责人</div>
              <div class="value common-value">{{ details.projectUserName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系方式</div>
              <div class="value common-value">{{ details.projectUserMobile || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">地址</div>
              <div class="value common-value">{{ details.addressDetail || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联领导(A角)</div>
              <div class="value common-value">{{ details.leaderOneName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">职务</div>
              <div class="value common-value">{{ details.leaderOnePosition || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联领导(B角)</div>
              <div class="value common-value">{{ details.leaderTwoName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">职务</div>
              <div class="value common-value">{{ details.leaderTwoPosition || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联警员</div>
              <div class="value common-value">{{ details.policeUserNames || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">服务信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">服务名称</div>
              <div class="value common-value">{{ record.serveTitle || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">服务民(辅)警</div>
              <div class="value common-value">{{ record.policeUserNames || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">服务时段</div>
              <div class="value common-value">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span
                      >{{ $moment(record.startTime).format('YYYY/MM/DD') }} -
                      {{ $moment(record.endTime).format('YYYY/MM/DD') }}</span
                    >
                  </template>
                  {{ $moment(record.startTime).format('YYYY/MM/DD') }} -
                  {{ $moment(record.endTime).format('YYYY/MM/DD') }}
                </a-tooltip>
              </div>
            </div>
          </div>

          <div class="flex">
            <div
              class="info-wrap f1"
              style="background: var(--theme-content-item-bg); border-bottom: 1px solid #0b5196"
            >
              <div class="label common-lable flex align-center justify-center" style="height: 100%">服务图片</div>
              <div class="img-wrap flex" style="padding: 10px 16px">
                <img
                  v-for="item in record.imageList"
                  :id="item.path"
                  :data-original="imgPrefix + item.path"
                  :src="imgPrefix + item.path"
                  class="cursor"
                  style="margin-left: 10px"
                  @click="werImg(item.path)"
                />
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable flex align-center justify-center" style="height: 100%">服务内容描述</div>
              <div
                class="value common-value"
                style="height: auto; white-space: wrap; overflow: visible; text-overflow: unset"
              >
                {{ record.serveContent || '暂无' }}
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">上传人员</div>
              <div class="value common-value">{{ record.userName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">上传时间</div>
              <div class="value common-value">
                {{ $moment(record.createTime).format('YYYY/MM/DD HH:mm:ss') || '暂无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import { ajaxGetDictItems } from '@/api/api'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      record: {},
      imgPrefix: '',
      project_company_type: [],
    }
  },

  methods: {
    async show(record) {
      this.publicVisible = true
      this.getDist()
      this.getDetail(record.projectCompanyId)
      this.getRecord(record.id)
    },

    async getDetail(id) {
      let { result } = await getAction('/common/project_company/detail', { id })
      this.details = result
    },

    async getRecord(id) {
      let { result } = await getAction('/common/project_company_serve_record/detail', { id })
      this.record = result
    },

    async getDist() {
      let { result: project_company_type } = await ajaxGetDictItems({ code: 'project_company_type' })
      this.project_company_type = project_company_type

      let { result: imgPrefix } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = imgPrefix[0].value
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    handleOk() {
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

.img-wrap {
  img {
    width: 174px;
    height: 98px;
  }
}
</style>
